<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <script type="text/javascript" src="../js/vue.js"></script>
    <!-- 引入第三方插件库 -->
    <script src="../js/dayjs.min.js"></script>
  </head>
  <body>
    <!-- 
        定义：对要显示的数据进行特定格式化后再显示【适用于一些简单逻辑的处理】
        语法： 
            1.注册过滤器：Vue.filter(name,callback) 或 new Vue({filters:{}})
            2.使用过滤器：{{xxx | 过滤器名}} 或 v-bind:属性="xxx | 过滤器名"
        备注：
            1.过滤器也可以接收额外的参数、多个过滤器也可以串联
            2.并没有改变原本的数据，是产生新的对应的数据
     -->
    <div id="root">
      <h2>显示格式化后的时间</h2>
      // 计算属性实现
      <h3>现在是：{{fmtTime}}</h3>
      // methods实现
      <h3>现在是：{{getFmtTime()}}</h3>
      //过滤器实现
      <h3>现在是：{{time | timeFormater}}</h3>
      //过滤器实现（传参）
      <h3>现在是：{{time | timeFormater2(YYYY-MM-DD)}}</h3>
      //多个过滤器的串联
      <h3>现在是：{{time | timeFormater2(YYYY-MM-DD) | mySlice}}</h3>

      <h3 :x="msg | mySlice">2022</h3>
    </div>
    <div id="root2">
      <h2>{{msg | mySlice}}</h2>
    </div>

    <script>
      //全局过滤器
      Vue.filter("mySlice", function (value) {
        return value.slice(0, 4);
      });

      const vm = new Vue({
        el: "#root",
        data: {
          time: 1646289413737, //时间戳
          msg: "你好，2022",
        },
        computed: {
          fmtTime() {
            return dayjs(this.time).format("YYYY年MM月DD日 HH:mm:ss");
            //不传值时拿到的是当前时间的时间戳，若是传了就以传进去的为主
          },
        },
        methods: {
          getFmtTime() {
            return dayjs(this.time).format("YYYY年MM月DD日 HH:mm:ss");
          },
        },
        //局部过滤器
        filters: {
          timeFormater(value) {
            return dayjs(value).format("YYYY年MM月DD日 HH:mm:ss");
          },
          timeFormater2(value, str = "YYYY年MM月DD日 HH:mm:ss") {
            // es6形参写法
            return dayjs(value).format(str);
          },
          mySlice(value) {
            return value.slice(0, 4);
          },
        },
      });
      new Vue({
        el: "#root2",
        data: {
          msg: "hello,jiaqikauile",
        },
      });
      vm.$mount("#root");
    </script>
  </body>
</html>
